package com.csw.compose.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.ParagraphStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.style.TextIndent
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.csw.compose.theme.AppTheme
import com.csw.compose.theme.BlueGrey60
import com.csw.compose.theme.pagePadding

@Preview(widthDp = 360, heightDp = 480)
@Composable
fun StyleComponentPreview() {
    AppTheme {
        Column(
            modifier = Modifier
                .background(MaterialTheme.colorScheme.background)
                .padding(
                    pagePadding
                )
        ) {
            PrimaryTitle("带主题色的标题", modifier = Modifier.align(Alignment.CenterHorizontally))
            PreviewSpacer()
            BodyText(
                """正文.......................................................................
                |.....................................................................................
                |.....................................................................................
                |.....................................................................................
                |.....................................................................................
                |.....................................................................................
            """.trimMargin()
            )
            PreviewSpacer()
            LabelText("描述文本.................................")
        }
    }
}

/**
 * 带主题色的标题
 */
@Composable
fun PrimaryTitle(text: String, modifier: Modifier = Modifier) {
    Text(
        text,
        style = MaterialTheme.typography.titleMedium,
        color = MaterialTheme.colorScheme.primary,
        modifier = modifier
    )
}

/**
 * 正文文本
 */
@Composable
fun BodyText(text: String, modifier: Modifier = Modifier) {
    Text(
        text,
        style = MaterialTheme.typography.bodyMedium,
        modifier = modifier
    )
}

/**
 * 描述文本
 */
@Composable
fun LabelText(text: String, modifier: Modifier = Modifier) {
    Text(
        buildAnnotatedString {
            withStyle(ParagraphStyle(textIndent = TextIndent(20.sp))) {
                append(text)
            }
        },
        style = MaterialTheme.typography.labelMedium,
        color = BlueGrey60,
        modifier = modifier
    )
}